<template>
<p>在数据很多的情况下，可以对数据进行搜索和过滤。</p>
<p>设置 <code>filterable</code> 为 <code>true</code> 即可开启搜索模式。 默认情况下，若数据项的 <code>label</code> 属性包含搜索关键字，则会在搜索结果中显示。 你也可以使用 <code>filter-method</code> 定义自己的搜索逻辑。 <code>filter-method</code> 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。 若方法返回 <code>true</code>，则会在搜索结果中显示对应的数据项。</p>
  <el-transfer
    v-model="value"
    filterable
    :filter-method="filterMethod"
    filter-placeholder="State Abbreviations"
    :data="data"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
  key: number
  label: string
  initial: string
}

const generateData = () => {
  const data: Option[] = []
  const states = [
    'California',
    'Illinois',
    'Maryland',
    'Texas',
    'Florida',
    'Colorado',
    'Connecticut ',
  ]
  const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
  states.forEach((city, index) => {
    data.push({
      label: city,
      key: index,
      initial: initials[index],
    })
  })
  return data
}

const data = ref<Option[]>(generateData())
const value = ref([])

const filterMethod = (query, item) => {
  return item.initial.toLowerCase().includes(query.toLowerCase())
}
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>